<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>取消事件默认行为</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; margin: 15px ; }
            .wrapper>* { margin: 25px ; }
        </style>
    </head>
    <body>

        <h3>取消事件默认行为</h3>
        
        <div class="wrapper">
            <!-- Hyper Text Reference -->
            <a href="http://www.kaifamiao.com" target="_blank">开发喵</a>
            <a href="http://www.lzcu.edu.cn/" target="_blank">兰州城市学院</a>
            <p>对于超链接元素来说，鼠标左键单击事件会导致浏览器打开 href 对应的 URL</p>
        </div>

        <script type="text/javascript">
            // let links = document.links ; // 获得整个页面上所有的超链接
            let links = document.querySelectorAll( 'a[href]' );
            console.log( links );
            let arr = Array.from( links ); 
            console.log( arr );

            let fn = function(e){
                // Event.prototype.preventDefault()
                e.preventDefault(); // 取消事件默认行为
                console.log( e );
                let t = e.target ; // 获得事件目标
                let url = t.getAttribute( 'href' ); // let url = t.href ;
                // window.open( url ); // 开启新窗口(即新的window实例)
                // location.href = url ; // 在当前窗口中打开
            }

            arr.forEach( link => {
                link.addEventListener( 'click' , fn , false );
            });
        </script>

        <div class="wrapper">
            <form action="http://www.baidu.com/s" target="_blank" name="baidu" >
                <input type="text" name="wd" >
                <input type="submit" value="百度一下">
            </form>
        </div>

        <script type="text/javascript">
            let btn = document.querySelector( '[type=submit]' );

            let listener = function(e){
                e.preventDefault(); 
                console.log( e );
                let t = e.target ;
                let w = t.previousElementSibling ;
                // 获取 input 或 textarea 中的内容时，使用其 value 属性即可
                let content = w.value ;
                // 判断content在剔除首尾空白后【不是】否是空串
                if( content.trim().length > 0  ) {
                    // 获得按钮所在的表单
                    let p = t.parentElement ;
                    console.log( p );
                    // 并提交表单
                    p.submit() ; // 调用表单的 submit 函数来提交表单即可
                    // 通过表单元素的 reset 函数可以重置表单
                } else {
                    alert( '请输入搜索关键字后再点击搜索按钮' );
                }
            }

            btn.addEventListener( 'click' , listener , false );
            
        </script>

    </body>
</html>